
<ion-header>
  <ion-navbar>
    <ion-title>Floating Action Buttons</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="buttons-fab-page">
  <ion-fab left top>
    <button ion-fab color="primary">
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-fab>


  <ion-fab center top>
    <button ion-fab color="secondary" icon-only>
      <ion-icon name="compass" is-active="false"></ion-icon>
    </button>
  </ion-fab>


  <ion-fab top right>
    <button ion-fab color="danger" icon-only>
      <ion-icon name="mic" is-active="false"></ion-icon>
    </button>
  </ion-fab>

  <ion-fab bottom center >
    <button ion-fab color="dark" class="fab-footer" icon-only>
      <ion-icon name="heart" is-active="false"></ion-icon>
    </button>
  </ion-fab>
  <div class="bar-footer"></div>
</ion-content>
